function check_megamenu(){
	jQuery('li.dd-item').each(function(){
		var parent = jQuery(this).parents('.dd-list')
		if(parent.length > 1){
			jQuery(this).find('a.activemega').hide();
			jQuery(this).find('.sub-menu-content').hide();
		}
		else{
			jQuery(this).find('a.activemega').show();
			if(jQuery(this).find('a.activemega').hasClass('active'))
				jQuery(this).find('.sub-menu-content').hide();
			else
				jQuery(this).find('.sub-menu-content').show();
		}
	})
}
var updatedata = function(e)
{
	check_megamenu();
}
function megamenuSubmit(){
	jQuery('#menu_area li.dd-item').each(function(index, value){
		if(jQuery(this).children('.dd-list').length > 0){
			var parent_id = index + 1;
			jQuery(this).children('.dd-list').children('li.dd-item').each(function(){
				jQuery(this).find('input.parent_id').val(parent_id);
			})
		}
	})
	jQuery('#menu_area').children('.dd-list').children('li').children('.info').children('.hidden-data').children('.parent_id').val(0);
	jQuery('#form').submit();
}
function remove_item(obj){
	var parent=jQuery(obj).parent().parent().parent();
	jQuery(parent).remove();
}
function activemega(obj){
	if(jQuery(obj).hasClass('active')==true){
		jQuery(obj).parent().parent().parent().children(".info").children('.sub-menu-content').show();
		jQuery(obj).parent().parent().children('.hidden-data').children('.activemega').attr('value', 1);
		jQuery(obj).html("Disable megamenu");
		jQuery(obj).removeClass('active');
	}else{
		jQuery(obj).addClass('active');
		jQuery(obj).parent().parent().parent().children(".info").children('.sub-menu-content').hide();
		jQuery(obj).parent().parent().children('.hidden-data').children('.activemega').attr('value', 0);
		jQuery(obj).html("Active Megamenu");
	}
}
function add_menu(obj){
	jQuery('.right #menu_area > ol').append(obj);
}
function get_content_obj(obj){
	var url='';
	var type_id = jQuery(obj).attr('value');
	var result="<li class='dd-item'><div class='dd-handle'>"+
	"<div class='bar'>"+
		"<span class='title'>" + jQuery(obj).attr('data') + "</span>"+		
	"</div>" + 
	"</div><div class='info hide'>"+
				"<p class='input-item'><span class='type'>Type : " +jQuery(obj).attr('class')+ "</span></p>"+				
				"<p class='input-item'><label>Title : </label>"+
				"<input type='text' name='title[]' value='" + jQuery(obj).attr('data') + "'  /></p>" +
				"<p class='input-item'><a  href='javascript:void(0);' class='remove' onclick='remove_item(this);'>Remove This Menu Item</a></p>"+
				"<p class='input-item'><a  href='javascript:void(0);' class='activemega active' onclick='activemega(this);'>Active Megamenu</a></p>"+
				"<div class='hidden-data'>" +
					"<input type='hidden' class='type' name='type[]' value='" + jQuery(obj).attr('class') + "'/>"+
					"<input type='hidden' class='parent_id' name='parent_id[]' value=''/>"+
					"<input type='hidden' class='type_id' name='type_id[]' value='" + type_id + "'/>"+
					"<input type='hidden' class='url' name='url[]' value=''/>"+
					"<input type='hidden' class='activemega' name='activemega[]' value='0'/>"+
				"</div>"+
				"<div class='sub-menu-content' style='display:none'><div><p class='input-item'><label>Num of Columns : </label><input name='columns[]' type='text' value=''/></p><p class='input-item'><label>Width(Input number only) : </label><input name='widths[]' type='text' value=''/></p></div><strong>Content of Sub-menu : </strong></p><textarea name='content_submenu[]' style='width: 695px; height: 213px;'></textarea></div>"+
			"</div><a href='javascript:void(0);' class='explane' onclick='explane(this)'>Explane</a></li>";
	return result;
}
function get_content_obj_custom(obj){
	var url=jQuery(obj).parent().find('input.url').attr('value');
	var title=jQuery(obj).parent().find('input.title').attr('value');
	var urlhtml="<p class='input-item'><label>Url : </label><input type='text' name='url[]' value='" + url + "'/></p>";
	var result="<li class='dd-item'><div class='dd-handle'>"+
	"<div class='bar'>"+
		"<span class='title'>" + title + "</span>"+		
	"</div>" + 
	"</div><div class='info hide'>"+
				"<p class='input-item'><span class='type'>Type : Custom</span></p>"+				
				"<p class='input-item'><label>Title : </label>"+
				"<input type='text' name='title[]' value='" + title + "'  /></p>" + urlhtml +
				"<p class='input-item'><a  href='javascript:void(0);' class='remove' onclick='remove_item(this);'>Remove This Menu Item</a></p>"+
				"<p class='input-item'><a  href='javascript:void(0);' class='activemega active' onclick='activemega(this);'>Active Megamenu</a></p>"+
				"<div class='hidden-data'>" +
					"<input type='hidden' class='type' name='type[]' value='custom'/>"+
					"<input type='hidden' class='parent_id' name='parent_id[]' value=''/>"+
					"<input type='hidden' class='type_id' name='type_id[]' value=''/>"+
					"<input type='hidden' class='activemega' name='activemega[]' value='0'/>"+
				"</div>"+
				"<div class='sub-menu-content' style='display:none'><div><p class='input-item'><label>Num of Columns : </label><input name='columns[]' type='text' value=''/></p><p class='input-item'><label>Width(Input number only) : </label><input name='widths[]' type='text' value=''/></p></div><strong>Content of Sub-menu : </strong></p><textarea name='content_submenu[]' style='width: 695px; height: 213px;'></textarea></div>"+
			"</div><a href='javascript:void(0);' class='explane' onclick='explane(this)'>Explane</a></li>";
	return result;
}
function explane(obj){
	if(jQuery(obj).parent().children('.info').hasClass('hide')==true)
		{	
			jQuery(obj).parent().children('.info').show();
			jQuery(obj).parent().children('.info').removeClass('hide');
			jQuery(obj).html('Collapse');
		}
	else{
			jQuery(obj).parent().children('.info').hide();
			jQuery(obj).parent().children('.info').addClass('hide');
			jQuery(obj).html('Explane');
		}
 }
jQuery(document).ready(function(){
	var id = jQuery('#menu_area').attr('auto-id');
	jQuery('a.add-to-menu').click(function(){
		var parent = jQuery(this).parent().children('ul');
		jQuery(parent).find('input').each(function(){
			if(jQuery(this).is(':checked')){
				var obj=get_content_obj(this, id);
				add_menu(obj);
				jQuery(this).attr('checked', false)
			}
		});
	});	
	jQuery('a.add-to-menu_custom').click(function(){
		var obj=get_content_obj_custom(this);		
		add_menu(obj);
	});
	jQuery('#menu_area').nestable({
        group: 1
    }).on('change', updatedata);
	check_megamenu();
})